<template>
  <div class="productChange">
    <el-collapse v-model="open">
      <el-collapse-item title="全局组件" name="1">
        <ul class="content-list">
          <li>
            <span style="width: 125px">列表类型：</span>
            <div>
              <el-radio v-model="styles.type" label="1">双列</el-radio>
              <el-radio v-model="styles.type" label="2">三列</el-radio>
              <el-radio v-model="styles.type" label="3">列表</el-radio>
              <el-radio v-model="styles.type" label="4">单列</el-radio>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="open3">
      <el-collapse-item title="添加商品" name="3">
        <ul class="content-list">
          <li>
            <span style="width: 125px">选择商品：</span>
            <div>
              <el-radio v-model="styles.typeProduct" label="1"
                >手动选择</el-radio
              >
              <el-radio v-model="styles.typeProduct" label="2"
                >选择分组</el-radio
              >
              <el-radio v-model="styles.typeProduct" label="3"
                >营销属性</el-radio
              >
            </div>
          </li>
          <li v-show="styles.typeProduct == 1" style="display: block">
            <el-table :data="styles.productName" style="width: 100%">
              <el-table-column prop="date" label="商品" min-width="300">
                <template slot-scope="scope">
                  <div class="product-intro">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="scope.row.name.icon"
                      fit="cover"
                    ></el-image>

                    <!-- <span>虚</span> -->
                    <span></span>
                    <p>{{ scope.row.name.name }}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="价格" min-width="80">
                <template slot-scope="scope">
                  <span>￥{{ scope.row.name.price }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作" min-width="80">
                <template slot-scope="scope">
                  <div class="product-operate">
                    <!-- <span>替换</span> -->
                    <span @click="deleted(scope.$index, 1)">删除</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div @click="openUrl" class="product-add">+添加商品</div>
          </li>
          <li v-show="styles.typeProduct == 2" style="display: block">
            <el-table :data="styles.productGroup" style="width: 100%">
              <el-table-column prop="name" label="分组名称" min-width="300">
                <template slot-scope="scope">{{
                  scope.row.name.name
                }}</template>
              </el-table-column>
              <el-table-column prop="address" label="操作" min-width="80">
                <template slot-scope="scope">
                  <div class="product-operate">
                    <!-- <span>替换</span> -->
                    <span @click="deleted(scope.$index, 2)">删除</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div
              v-if="
                styles.productGroup == undefined
                  ? false
                  : styles.productGroup.length == 0
              "
              @click="openUrl2"
              class="product-add"
            >
              +添加分组
            </div>
          </li>
          <li v-show="styles.typeProduct == 3">
            <span></span>
            <div class="market-bg">
              <el-radio v-model="styles.productMarket" label="1"
                >新品商品</el-radio
              >
              <el-radio v-model="styles.productMarket" label="2"
                >热卖商品</el-radio
              >
              <el-radio v-model="styles.productMarket" label="3"
                >推荐商品</el-radio
              >
            </div>
          </li>
          <li v-show="styles.typeProduct != 1">
            <span>显示数量：</span>
            <div>
              <edgeSetting
                v-model="styles.productNum"
                unit="件"
                :max="20"
                :init="Number(styles.productNum)"
              ></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="open2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span style="width: 125px">组件背景：</span>
            <div>
              <div>
                <el-radio v-model="styles.typeBg" label="1">透明</el-radio>
                <el-radio v-model="styles.typeBg" label="2">颜色</el-radio>
                <el-radio v-model="styles.typeBg" label="3">背景图片</el-radio>
              </div>
              <ul v-show="styles.typeBg == 2" class="content-list color-bg">
                <li style="margin-bottom: 0">
                  <span>背景颜色：</span>
                  <div>
                    <colorSetting
                      v-model="styles.colorBg"
                      :originColor="styles.colorBg"
                      initColor="#ff0303"
                    ></colorSetting>
                  </div>
                </li>
              </ul>
              <ul v-show="styles.typeBg == 3" class="content-list color-bg">
                <li style="margin-bottom: 0">
                  <span>背景图片：</span>
                  <div>
                    <upLoadImage :v="styles" :height="50"></upLoadImage>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <span style="width: 125px">商品背景色：</span>
            <div>
              <colorSetting
                v-model="styles.colorProductBg"
                :originColor="styles.colorProductBg"
                initColor="#fff"
              ></colorSetting>
            </div>
          </li>
          <li>
            <span style="width: 125px">商品标题：</span>
            <div>
              <colorSetting
                v-model="styles.colorTitle"
                :originColor="styles.colorTitle"
                initColor="#212121"
              ></colorSetting>
            </div>
          </li>
          <li>
            <span style="width: 125px">购买按钮：</span>
            <div>
              <ul class="content-list color-bg">
                <li>
                  <span>按钮样式：</span>
                  <div>
                    <el-button-group>
                      <el-button
                        size="mini"
                        @click="styles.typeBtn = '1'"
                        type
                        plain
                      >
                        <svg
                          style="font-size: 16px"
                          class="icon"
                          aria-hidden="true"
                        >
                          <use xlink:href="#iconjiagou" />
                        </svg>
                      </el-button>
                      <el-button
                        size="mini"
                        @click="styles.typeBtn = '2'"
                        type
                        plain
                      >
                        <svg
                          style="font-size: 16px"
                          class="icon"
                          aria-hidden="true"
                        >
                          <use xlink:href="#iconjia" />
                        </svg>
                      </el-button>
                      <el-button
                        size="mini"
                        @click="styles.typeBtn = '3'"
                        type
                        plain
                      >
                        <svg
                          style="font-size: 16px"
                          class="icon"
                          aria-hidden="true"
                        >
                          <use xlink:href="#iconjia1" />
                        </svg>
                      </el-button>
                    </el-button-group>
                  </div>
                </li>
                <li style="margin-bottom: 0">
                  <span>按钮颜色：</span>
                  <div>
                    <colorSetting
                      v-model="styles.colorBtn"
                      :originColor="styles.colorBtn"
                      initColor="#ff0303"
                    ></colorSetting>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <span style="width: 125px">商品角标：</span>
            <div>
              <ul class="content-list color-bg">
                <li>
                  <span>角标样式：</span>
                  <div>
                    <el-button-group>
                      <el-button
                        size="mini"
                        @click="styles.typePay = '1'"
                        type
                        plain
                      >
                        <img
                          style="width: 35px"
                          src="../../../assets/img/pay1.png"
                          alt
                        />
                      </el-button>
                      <el-button
                        size="mini"
                        @click="styles.typePay = '2'"
                        type
                        plain
                      >
                        <img
                          style="width: 32px"
                          src="../../../assets/img/pay2.png"
                          alt
                        />
                      </el-button>
                      <el-button
                        size="mini"
                        @click="styles.typePay = '3'"
                        type
                        plain
                      >
                        <img
                          style="width: 32px"
                          src="../../../assets/img/pay3.png"
                          alt
                        />
                      </el-button>
                      <el-button
                        size="mini"
                        @click="styles.typePay = '-1'"
                        type
                        plain
                      >
                        <div
                          style="width: 35px; height: 19px; padding-top: 4px"
                        >
                          无
                        </div>
                      </el-button>
                    </el-button-group>
                  </div>
                </li>
                <li>
                  <span>角标文字：</span>
                  <div>
                    <el-radio v-model="styles.typeText" label="推荐"
                      >推荐</el-radio
                    >
                    <el-radio v-model="styles.typeText" label="热销"
                      >热销</el-radio
                    >
                    <el-radio v-model="styles.typeText" label="上新"
                      >上新</el-radio
                    >
                    <el-radio v-model="styles.typeText" label="包邮"
                      >包邮</el-radio
                    >
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting
                v-model="styles.marginTop"
                unit="px"
                :max="50"
                :init="Number(styles.marginTop)"
              ></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting
                v-model="styles.marginBottom"
                unit="px"
                :max="50"
                :init="Number(styles.marginBottom)"
              ></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting
                v-model="styles.marginLR"
                unit="px"
                :max="50"
                :init="Number(styles.marginLR)"
              ></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting
                v-model="styles.circle"
                unit="px"
                :max="15"
                :init="Number(styles.circle)"
              ></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <urlSelect ref="urlSelect" @getUrl="getUrl"></urlSelect>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import colorSetting from "../../comm/colorSetting";
import upLoadImage from "../../comm/upLoadImage";
import edgeSetting from "../../comm/edgeSetting";
import urlSelect from "../../../components/comm/urlSelect";
export default {
  name: "productChange",
  data() {
    return {
      open: "1",
      open2: "2",
      open3: "3",
    };
  },
  watch: {
    "styles.typeBg"() {
      if (this.styles.typeBg == 1) {
        this.styles.colorBg = "rgba(0,0,0,0)";
      } else if (this.styles.typeBg == 2) {
        this.styles.colorBg = "#ff0303";
      } else {
        this.styles.colorBg = "";
      }
    },
  },
  computed: {
    ...mapState(["list", "currentId"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  methods: {
    openUrl() {
      this.$refs["urlSelect"].cateShown = [false, false, true, false, false];
      this.$refs["urlSelect"].isShown = true;
      this.$refs["urlSelect"].activeName = "product";
      this.$refs["urlSelect"].getProductList();
    },
    getUrl(url) {
      if (this.$refs["urlSelect"].activeName == "product") {
        this.styles.productName.push(url);
      }
      if (this.$refs["urlSelect"].activeName == "productCategory") {
        this.styles.productGroup.push(url);
      }
      console.log(url);
    },
    openUrl2(i) {
      this.$refs["urlSelect"].cateShown = [false, true, false, false, false];
      this.$refs["urlSelect"].isShown = true;
      this.$refs["urlSelect"].activeName = "productCategory";
      this.$refs["urlSelect"].getProductCategory();
    },
    deleted(val, num) {
      if (num == 1) {
        this.styles.productName.splice(val, 1);
      } else {
        this.styles.productGroup.splice(val, 1);
      }

      console.log(val);
    },
  },
  components: {
    colorSetting,
    upLoadImage,
    edgeSetting,
    urlSelect,
  },
};
</script>


<style lang='less' scoped>
@import url("../../../assets/css/base.less");
/deep/.el-table_1_column_2 {
  text-align: right;
}
/deep/.el-table_1_column_3 {
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background-color: #f7f7f7;
}
/deep/.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.color-bg {
  margin-top: 10px;
  background-color: #f7f7f7;
  padding: 20px;
}
.product-operate {
  color: #2d8cf0;
  > span {
    cursor: pointer;
  }
}
.product-intro {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > span {
    margin: 0 5px 0 10px;
    background-color: #e6fff9;
    color: #00c5c5;
  }
}
.product-add {
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  color: #2d8cf0;
}
.market-bg{
  background-color: #f4f6f8;
  padding: 20px;
}
</style>
